<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 封面 -->
      <div class="cover">
        <img :src="info.coverImgUrl" alt="" />
      </div>
      <!-- 右侧 -->
      <div class="header-msg">
        <!-- 标题 -->
        <h3 class="title yahei">
          <span class="tag">歌单</span>
          {{ info.title }}
        </h3>
        <!-- 作者信息 -->
        <div class="author-msg yahei">
          <span class="head-pic">
            <img :src="info.authorHeadPic" alt="" />
          </span>
          <span class="author-name mr">
            {{ info.authorName }}
          </span>
          <span class="create-time mr">
            创建时间：{{ musicListCreateTime }}
          </span>
        </div>
        <!-- 三个按钮 -->
        <div class="handle yahei">
          <button class="play-all hover-hand">
            <span @click="playAll">
              <i class="iconfont">&#xe626;</i>
              播放全部
            </span>
          </button>
          <button class="hover-hand collect">
            <span>
              <i class="iconfont">&#xe602;</i>
              收藏({{ info.subscribeCount }})
            </span>
          </button>
          <button class="hover-hand share">
            <span>
              <i class="iconfont">&#xe6e6;</i>
              分享({{ info.shareCount }})
            </span>
          </button>
        </div>
        <div class="desc">
          <p class="yahei">
            标签：
            <span v-for="(item, index) in info.tags" :key="index">{{
              item + "/"
            }}</span>
          </p>
          <p class="yahei">简介：{{ info.desc }}</p>
        </div>

        <div class="count yahei">
          <div class="song">
            <p>歌曲数</p>
            <p>{{ info.trackCount }}</p>
          </div>
          <div>
            <p>播放数</p>
            <p>{{ info.playCount }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 切换栏 -->
    <div class="tabbar yahei">
      <div
        :class="tabShow === 0 ? 'active' : ''"
        @click="toggleClick(0)"
        class="hover-hand"
      >
        歌曲列表
      </div>
      <div
        :class="tabShow === 1 ? 'active' : ''"
        @click="toggleClick(1)"
        class="hover-hand"
      >
        评论({{ info.commentCount }})
      </div>
    </div>

    <!-- 歌单详情 -->
    <div class="main">
      <!-- 列表 -->
      <div class="list" v-show="tabShow === 0">
        <tr class="head">
          <div class="index yahei"></div>
          <div class="collection yahei">操作</div>
          <div class="title yahei">音乐标题</div>
          <div class="singer yahei">歌手</div>
          <div class="album yahei">专辑</div>
          <div class="time yahei">时长</div>
        </tr>

        <tr class="item" v-for="(item, index) in showSongs" :key="item.id">
          <div class="index yahei">{{ songIndex + index + 1 }}</div>
          <div class="collection yahei">
            <i class="iconfont">&#xe602;</i>
          </div>
          <div class="title yahei">{{ item.name }}</div>
          <div class="singer yahei">{{ handleAuthor(item.ar) }}</div>
          <div class="album yahei">{{ item.al.name }}</div>
          <div class="time yahei">{{ songTimeFormat(item.dt) }}</div>
        </tr>

        <div class="pag">
          <div>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="songs.length"
              @current-change="currentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 评论 -->
      <div class="comment" v-show="tabShow === 1">
        <div class="input">
          <textarea name=""></textarea>
          <p class="yahei">
            <span class="hover-hand">评论</span>
          </p>
        </div>

        <div class="yahei title">
          精彩评论
        </div>

        <div class="show-comment">
          <ul>
            <li v-for="item in comments" :key="item.commentId">
              <span class="left">
                <img :src="item.user.avatarUrl" alt="" />
              </span>
              <div class="right">
                <div class="comment-info yahei">
                  <span class="hover-hand">{{ item.user.nickname }}：</span>
                  {{ item.content }}
                </div>
                <div class="comment-time yahei">
                  {{ showCommentCreateTime(item.time) }}
                </div>
              </div>
            </li>
          </ul>
        </div>

        <div class="pag">
          <div>
            <el-pagination
              background
              layout="prev, pager, next"
              :total="info.commentCount"
              @current-change="commentCurrentChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dayjs from "dayjs";
import {
  getMusicListDetail,
  MusicListDetailInfo,
  getSongDetail,
  getSongListComment,
} from "network/recommend.js";
import { handleAuthor } from "utils/author.js";
import bus from "utils/bus.js";

export default {
  name: "MusicListDetail",
  data() {
    return {
      id: 0,
      info: {},
      tabShow: 0,
      songIds: [],
      songIdsStr: "",
      songs: [],
      showSongs: [],
      songIndex: 0,
      loadingIsShow: 0,
      loadingInstance: {},
      comments: [],
    };
  },
  computed: {
    musicListCreateTime() {
      return dayjs(this.info.createTime).format("YYYY-MM-DD");
    },
  },

  created() {
    this.id = this.$route.query.id;
    // console.log(this.$route.query.id);
    // 发送网络请求获取歌单详情数据
    getMusicListDetail(this.id).then((res) => {
      const data = res.data.playlist;
      this.info = new MusicListDetailInfo(data);
      // console.log(this.info);
      // console.log(data.trackIds.find(this.handleSongInfo));

      //拿到歌单里所有歌曲的id
      data.trackIds.forEach((element) => {
        this.songIds.push(element.id);
      });
      this.songIdsStr = this.songIds.join();

      this.loadingIsShow += 1;
      //拿着id发送请求获取歌曲信息
      getSongDetail(this.songIdsStr).then((res) => {
        this.songs = res.data.songs;

        //默认显示歌曲数
        this.showSongs = this.songs.slice(0, 10);

        this.loadingIsShow += 1;
      });
    });
  },
  mounted() {
    this.loadingInstance = this.$loading({
      target: document.querySelector(".list"),
      text: "加载中...",
    });
  },
  methods: {
    toggleClick(i) {
      this.tabShow = i;
      if (i === 1) {
        //获取歌单评论数据
        getSongListComment(this.id, 0).then((res) => {
          this.comments = res.data.comments;
        });
      }
    },

    playAll() {
      // console.log("播放全部");
      // console.log(this.songs);
      bus.$emit("musicListPlayAll", this.songs);
    },

    songTimeFormat(time) {
      return dayjs(time).format("mm:ss");
    },

    handleAuthor,

    currentChange(page) {
      this.showSongs = this.songs.slice((page - 1) * 10, page * 10);
      this.songIndex = (page - 1) * 10;
    },

    commentCurrentChange(page) {
      getSongListComment(this.id, (page - 1) * 10).then((res) => {
        this.comments = res.data.comments;
      });
    },

    showCommentCreateTime(time) {
      return dayjs(time).format("YYYY年MM月DD日 HH:mm:ss");
    },
  },
  watch: {
    loadingIsShow(newVal) {
      if (newVal === 2) this.loadingInstance.close();
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  width: 100%;
  height: 2rem;
  .cover {
    width: 2rem;
    height: 2rem;
    border-radius: 0.166667rem;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .header-msg {
    flex: 1;
    margin: 0.1rem 0 0.1rem 0.25rem;
    .title {
      font-size: 0.141667rem;
      .tag {
        padding: 5px 10px;
        color: #e83c3c;
        border: 0.016667rem solid #e83c3c;
        border-radius: 0.041667rem;
      }
    }
    .author-msg {
      margin: 0.125rem 0;
      display: flex;
      align-items: center;
      height: 0.25rem;
      font-size: 0.125rem;
      .head-pic {
        display: inline-block;
        width: 0.25rem;
        height: 0.25rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .mr {
        margin: 0 0.083333rem;
      }
    }
    .handle {
      button {
        margin-right: 0.166667rem;
        width: 1.333333rem;
        height: 0.35rem;
        border: none;
        outline: none;
        border-radius: 0.066667rem;
        span {
          i {
            margin-right: 0.083333rem;
          }
        }
      }
      .play-all {
        background-color: #e83c3c;
        color: white;
      }
      button:hover {
        border: 0.008333rem solid lightseagreen;
      }
      button:active {
        border: 0.016667rem solid lightseagreen;
      }
      .play-all:hover {
        opacity: 0.8;
      }
    }
    .desc {
      margin-top: 0.125rem;
      p {
        font-size: 0.116667rem;
        margin-bottom: 0.083333rem;
      }
    }
    .count {
      position: absolute;
      top: 0.083333rem;
      right: 0.083333rem;
      font-size: 13px;
      div {
        float: left;
      }
      .song {
        margin-right: 0.066667rem;
        padding-right: 0.066667rem;
        border-right: 2px solid #dde0e7;
      }
    }
  }
}

.tabbar {
  display: flex;
  margin-top: 0.166667rem;
  font-size: 0.125rem;
  border-bottom: 1px solid #dcdfe6;
  div {
    width: 1.333333rem;
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
  }
  div:hover {
    color: lightseagreen;
    border-bottom: 0.025rem solid lightseagreen;
  }
  .active {
    color: lightseagreen;
    border-bottom: 0.025rem solid lightseagreen;
  }
}

.main {
  .list {
    > :nth-child(odd) {
      background: #f9f9f9;
    }
    tr {
      // height: 0.233333rem;
      padding: 0.025rem 0.025rem;
      display: flex;
      div {
        padding: 5px;
      }
      .index {
        width: 50px;
        border: none !important;
      }
      .collection {
        width: 60px;
      }
      .title {
        flex: 1 1 0%;
      }
      .singer {
        flex: 1 1 0%;
      }
      .album {
        flex: 1 1 0%;
      }
      .time {
        width: 120px;
      }
    }
    .head {
      margin-top: 0.166667rem;
      border-bottom: 1px solid #dde0e7;
      div {
        border-left: 1px solid #dde0e7;
      }
    }
    .pag {
      margin-top: 0.25rem;
      width: 100%;
      margin-bottom: 0.25rem;
      div {
        margin-left: 50%;
        transform: translateX(-63%);
      }
    }
  }

  .comment {
    .input {
      margin-top: 0.166667rem;
      padding: 0.083333rem;
      background-color: #f0f0f2;
      textarea {
        width: 100%;
        height: 0.541667rem;
        outline: none;
      }
      p {
        text-align: right;
        span {
          font-size: 14px;
        }
      }
    }
    .title {
      width: 100%;
      height: 0.166667rem;
      padding: 0.166667rem 0 0.083333rem 0;
      font-size: 15px;
    }
    .show-comment {
      width: 100%;
      ul {
        > :nth-child(2n) {
          background-color: #f9f9f9;
        }
        li {
          display: flex;
          padding: 0.083333rem 0.166667rem;
          width: 100%;
          align-items: center;
          // height: 0.416667rem;
          .left {
            margin-top: 0.05rem;
            display: inline-block;
            width: 0.358333rem;
            height: 0.358333rem;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            flex: 1;
            margin-top: 0.033333rem;
            margin-left: 0.166667rem;
            height: 100%;
            .comment-info {
              font-size: 16px;
              span {
                color: lightseagreen;
              }
            }
            .comment-time {
              margin: 7px 0 0 10px;
              font-size: 14px;
            }
          }
        }
      }
    }
    .pag {
      margin-top: 0.25rem;
      width: 100%;
      margin-bottom: 0.25rem;
      div {
        margin-left: 50%;
        transform: translateX(-63%);
      }
    }
  }
}
</style>
